<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
		<meta name="aplus-terminal" content="1"/>
		<meta name="keywords" content="SHOPDZ" />
		<meta name="apple-mobile-web-app-title" content="SHOPDZ"/>
		<meta name="apple-mobile-web-app-capable" content="yes"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
		<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
		<title>拼团首页</title>
		<link rel="shortcut icon" href="favicon.ico">
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/style.css" />
</head>
<body>
	<div class="wrapper bgfa">
		<!--content开始-->
			<div class="contentT">
				<div class="tab-titleBox">
					<ul class="tab-title" id="tab-title"> 
						<li class="font-red">拼团首页</li>
						<li>我的拼团</li>
						<p class="groupBor"></p>
					</ul> 
				</div>
				<div id="tab-content" class="tab-content">
					<div class="show group-list">
						<img src="images/groupBan1.png" alt="" class="groupBan"/>
						<div class="playGroup">
							<a href="#">
								<span class="playGroup-tit">拼团玩法</span>
								<img src="images/jtr.png" alt="" class="playGroup-point"/>
							</a>
						</div>
						<ul class="groupStep-list">
							<li><span class="groupStep-num">1</span>选择商品</li>
							<li><span class="groupStep-num">2</span>支付开团</li>
							<li><span class="groupStep-num">3</span>邀请好友</li>
							<li><span class="groupStep-num">4</span>拼团成功</li>
						</ul>
						<div class="group-commodity">
							<div class="commodityImg-box">
								<img src="images/com.png" alt="拼团商品图片"  class="commodityImg"/>
								<div class="groupIntroduce">
									<div class="introduceCover"></div>
									<div class="introduceCon">
										<span class="groupPerson-num">4人团</span>
										<img src="images/groupH.png" alt="指示团长图标" class="groupHead"/>
										<p class="groupHead-welfare">团长福利：<span>成员赠2000积分</span></p>
									</div>
								</div>
							</div>
							<div class="group-comDet">
								<div class="group-comName">商品名称商品名称商品名称商名称商品名称商名称商品名称商品名称商品名称商品名称</div>
								<p  class="group-comDescribe">这里是商品描述这里是商品描述这里是商品描述这里是商品描述这里是商品描述</p>
								<p class="group-comDescribe group-conTime">活动时间：<span>2016.12.12-2016.12.20</span></p>
								<div class="groupOpen">
									<p class="group-comPrice"><span class="group-newPrice">¥298</span><span class="group-oldPrice">¥500</span></p>
									<input type="button" value="我要开团" class="groupOpen-btn"/>
								</div>
							</div>
						</div>
						<div class="group-commodity">
							<div class="commodityImg-box">
								<img src="images/com.png" alt="拼团商品图片"  class="commodityImg"/>
								<div class="groupIntroduce">
									<div class="introduceCover"></div>
									<div class="introduceCon">
										<span class="groupPerson-num">3人团</span>
										<img src="images/groupH.png" alt="指示团长图标" class="groupHead"/>
										<p class="groupHead-welfare">团长福利：<span>成员赠2000积分</span></p>
									</div>
								</div>
							</div>
							<div class="group-comDet">
								<div class="group-comName">商品名称商品名称商品名称商名称商品名称商名称商品名称商品名称商品名称商品名称</div>
								<p  class="group-comDescribe">这里是商品描述这里是商品描述这里是商品描述这里是商品描述这里是商品描述</p>
								<p class="group-comDescribe group-conTime">活动时间：<span>2016.12.12-2016.12.20</span></p>
								<div class="groupOpen">
									<p class="group-comPrice"><span class="group-newPrice">¥298</span><span class="group-oldPrice">¥500</span></p>
									<input type="button" value="我要开团" class="groupOpen-btn"/>
								</div>
							</div>
						</div>
					</div>
					<div class="group-list">
						<div class="myGroup-box">
							<dl class="myGroup-commodity">
								<dt class="myGroup-comDt"><img src="images/img2.png" alt="我的拼团列表商品图片"  class="myGroup-comImg"/></dt>
								<dd class="myGroup-comDd">
									<div class="myGroup-statu">
										<span class="groupPerson-num">3人团</span>
										<span class="myGroup-statuBtn myGroup-progressBtn">进行中</span>
									</div>
									<p class="myGroup-comName">商品名称商品名称商品名称商品名称商品名称商品名称商品名称</p>
									<div class="myGroup-comSpec"><span>2米大床</span><span>清新蓝</span></div>
									<div class="myGroup-comDet">
										<span class="group-newPrice">¥2889</span>
										<span class="group-oldPrice">¥5899</span>
									</div>
								</dd>
							</dl>
							<div class="myGroup-btnBox">
								<a href="#" class="myGroup-progressWord marR4">待付款订单</a>
								<a href="#" class="myGroup-btn mustPay">立即付款</a>
							</div>
						</div>
						<div class="myGroup-box">
							<dl class="myGroup-commodity">
								<dt class="myGroup-comDt"><img src="images/img2.png" alt="我的拼团列表商品图片"  class="myGroup-comImg"/></dt>
								<dd class="myGroup-comDd">
									<div class="myGroup-statu">
										<span class="groupPerson-num">3人团</span>
										<span class="myGroup-statuBtn myGroup-successBtn">拼团成功</span>
									</div>
									<p class="myGroup-comName">商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</p>
									<div class="myGroup-comSpec"><span>2米大床</span><span>清新蓝</span></div>
									<div class="myGroup-comDet">
										<span class="group-newPrice">¥2889</span>
										<span class="group-oldPrice">¥5899</span>
									</div>
								</dd>
							</dl>
							<div class="myGroup-btnBox">
								<a href="#" class="myGroup-btn marR4">订单详情</a>
								<a href="#" class="myGroup-btn">拼团详情</a>
							</div>
						</div>
						<div class="myGroup-box">
							<dl class="myGroup-commodity">
								<dt class="myGroup-comDt"><img src="images/img2.png" alt="我的拼团列表商品图片"  class="myGroup-comImg"/></dt>
								<dd class="myGroup-comDd">
									<div class="myGroup-statu">
										<span class="groupPerson-num">3人团</span>
										<span class="myGroup-statuBtn myGroup-failedBtn">拼团失败</span>
									</div>
									<p class="myGroup-comName">商品名称商品名称商品名名称</p>
									<div class="myGroup-comSpec"><span>2米大床</span><span>清新蓝</span></div>
									<div class="myGroup-comDet">
										<span class="group-newPrice">¥2889</span>
										<span class="group-oldPrice">¥5899</span>
									</div>
								</dd>
							</dl>
							<div class="myGroup-btnBox">
								<a href="#" class="myGroup-btn marR4">订单详情</a>
								<a href="#" class="myGroup-btn">拼团详情</a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--content结束-->
		</div>
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
		<script language="javascript"> 
			$(function(){
				$('#tab-title li').click(function(){ 
					var liindex = $('#tab-title li').index(this);
					var liWidth = $('#tab-title li').width();
					var comWidth = $('#tab-title').width();
					if(liindex == 0){
						$('.groupBor').stop(false,true).animate({'left' : (comWidth*0.14) + 'px'},300);
					} else {
						$('.groupBor').stop(false,true).animate({'left' : (liindex * liWidth) + (comWidth*0.42) + 'px'},300);
					}
					$(this).addClass('font-red').siblings().removeClass('font-red');
					$("#tab-content > div").removeClass('show').eq($('#tab-title li').index(this)).addClass('show');
					
				});
			});
		</script>
</body>
</html>